<template>
    <div class="widget">
        <li class="widget-item">
            <p class="widget-title">标题</p>
            <el-input type="text" class="val" size="mini" v-model="formData.title"  />
            <div></div>
        </li>
        <li class="widget-item">
            <p class="widget-title-big">对方</p>
        </li>
        <li class="widget-item">
            <p class="widget-title">探测到敌方</p>
            <el-select v-model="formData.unit_type" class="widget-select" size="mini"
                :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
                <el-option v-for="item in unit_types" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </li>
        <li class="widget-item">
            <p class="widget-title-big">我方</p>
        </li>
        <li class="widget-item">
            <p class="widget-title">战损</p>
            <el-select v-model="formData.unit_damage" class="widget-select" size="mini"
                :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
                <el-option v-for="item in unit_types" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </li>
    </div>
</template>
<script>

export default {
    props: {},
    data() {
        return {
            content: {
            },
            formData: {
            },
            unit_types: null,
            actions: [],
            units: [],
            defaultValue: '',
        };
    },
    methods: {
        commitData() {
            this.defaultValue = JSON.stringify(this.formData)
            this.content.defaultValue = this.defaultValue
            this.$EventBus.$emit('defaultValue', this.content)
        },
        getUnitTypes() {
            this.unit_types = [
                { label: "无", value: "" },
                { label: "无人机", value: "uuv" },
                { label: "无人艇", value: "ship" }
            ]
        },
        getUnitActions() {
            this.unit_actions = [
                { label: "巡逻", value: "patrol" },
                { label: "攻击", value: "attack" }
            ]
        },
        getUnits() {
            this.units = [
                { label: "飞行编队1", value: "formation1" },
                { label: "飞行编队2", value: "formation2" }
            ]
        }
    },
    mounted() {
        console.log("this.context", this.content)
        this.defaultValue = this.content.defaultValue
        if (this.defaultValue) {
            this.formData = JSON.parse(this.defaultValue)
        }
        this.getUnitTypes()
        this.getUnitActions()
        this.getUnits()
    },
    beforeDestroy(){
        this.commitData()
    }
};
</script>

<style lang="less" scoped>
.val {
    width: 180px;
}
</style>
